﻿﻿﻿﻿﻿﻿@extends('admin.Default')
@section('type')
    <link href="{{ asset('myadmin/css/plugins/iCheck/custom.css') }}" rel="stylesheet">
    <link href="{{ asset('myadmin/css/plugins/dataTables/dataTables.bootstrap.css') }}" rel="stylesheet">
    <link href="{{ asset('myadmin/webuploader/webuploader.css') }}" rel="stylesheet">
    <link href="{{ asset('myadmin/css/plugins/dropzone/basic.css') }}" rel="stylesheet">
    <link href="{{ asset('myadmin/css/plugins/dropzone/dropzone.css') }}" rel="stylesheet">
@stop
@section('content')
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5><a data-toggle="modal" class="" href="#modal-form-one" >添加主题图片</a></h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="table_data_tables.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="table_data_tables.html#">选项1</a>
                                </li>
                                <li><a href="table_data_tables.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <table class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th style="display: none">隐藏id</th>
                                <th>描述</th>
                                {{--<th>商家ID</th>--}}
                                <th>链接</th>
                                <th>主题图片</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="tbody">
                            @foreach($list as $k=>$v)
                                <tr class="gradeX" id="{{ $k+1 }}">
                                    <td>{{ $k+1 }}</td>
                                    <td style="display: none">{{ $v['id'] }}</td>
                                    <td>{{ $v['describe'] }}</td>
                                    {{--<td>{{$v['store_id']}}</td>--}}
                                    <td>{{ $v['url'] }}
                                    </td>
                                    @if (!empty($v['name']))
                                        <td><a data-toggle="modal"  href="#modal-form-photo" onclick="editImg(this)"><img src="{{ url('/upload/theme/'.$v['name']) }}" width="60" onclick="subHid(this)"></a></td>
                                    @else
                                        <td><a data-toggle="modal" class="btn btn-primary" href="#modal-form-photo" onclick="subHid(this)">添加图片</a></td>
                                    @endif
                                    <td class="centercenter">
                                        <a  class="btn btn-primary" onclick="delType(this)">删除</a>
                                        <a data-toggle="modal" class="btn btn-primary" onclick="editType({{ $v['id'] }},this)" href="#modal-form-edit">修改</a></td>
                                </tr>
                            @endforeach
                            </tbody>


                        </table>

                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- Mainly scripts -->
    <div id="modal-form-edit" class="modal fade" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12 ">
                            <button class="close"
                                    data-dismiss="modal">&times;
                            </button>
                            <h3 class="m-t-none m-b">修改描述</h3>
                            <input type="hidden" name="id" id="id" />
                            <div class="form-group">

                                <label>描述：</label>
                                <input type="text" id="yname" placeholder="" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>链接网址：</label>
                                <input type="text" placeholder="此处添加网址" class="form-control" id="url">
                            </div>

                            <div>

                                <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"
                                        onclick="edit(this)" ><strong>更改</strong>
                                </button>

                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="modal-form-photo" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <button class="close"
                                    data-dismiss="modal">&times;
                            </button>
                            <h3 class="m-t-none m-b" id="up_img">添加图片</h3>

                            <form action='/admin/theme/rexiao/file' method='post' enctype='multipart/form-data'>
                                <input type='hidden' name='_token' value='{{ csrf_token() }}'>
                                <input type='hidden' name='id' id="hid">
                                <div class="list list-title">

                                    <li class="head"><i>添加主题：</i><img id="pic" src="{{ asset('upload/theme/detail.jpg') }}" width="80"><input style="display: none" type="file" id="img" name="photo" ><button type="button" onclick="demo();"  >点击上传<br></button></li>
                                    </ul>

                                </div>
                                <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"
                                ><strong>提交</strong>
                                </button>
                            </form>



                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="modal-form-one" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <button class="close"
                                    data-dismiss="modal">&times;
                            </button>
                            <h3 class="m-t-none m-b">添加轮播图</h3>

                            <div class="form-group">
                                <label>简短的描述：</label>
                                <input type="text" placeholder="此处添加描述" class="form-control" id="sub-top">
                            </div>
                            <div class="form-group">
                                <label>链接网址：</label>
                                <input type="text" placeholder="此处添加网址" class="form-control" id="urls">
                            </div>
                            <div>
                                <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"
                                        onclick="subTop()"><strong>提交</strong>
                                </button>

                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@stop
@section('script')
    <!-- iCheck -->
    <script type="text/javascript" src="{{ asset('myadmin/js/plugins/iCheck/icheck.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('myadmin/webuploader/webuploader.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('myadmin/js/plugins/dropzone/dropzone.js') }}"></script>
    <script>
        $(document).ready(function () {
//            //第一个
//            $('.i-checks').iCheck({
//                checkboxClass: 'icheckbox_square-green',
//                radioClass: 'iradio_square-green',
//            });

            //第二个
            $('.dataTables-example').dataTable();

            /* Init DataTables */
            var oTable = $('#editable').dataTable();

            /* Apply the jEditable handlers to the table */
            oTable.$('td').editable('../example_ajax.php', {
                "callback": function (sValue, y) {
                    var aPos = oTable.fnGetPosition(this);
                    oTable.fnUpdate(sValue, aPos[0], aPos[1]);
                },
                "submitdata": function (value, settings) {
                    return {
                        "row_id": this.parentNode.getAttribute('id'),
                        "column": oTable.fnGetPosition(this)[2]
                    };
                },

                "width": "90%",
                "height": "100%"
            });


            //第三个
            Dropzone.options.myAwesomeDropzone = {

                autoProcessQueue: false,
                uploadMultiple: true,
                parallelUploads: 100,
                maxFiles: 100,

                // Dropzone settings
                init: function () {
                    var myDropzone = this;
                    this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
                        e.preventDefault();
                        e.stopPropagation();
                        myDropzone.processQueue();
                    });
                    this.on("sendingmultiple", function () {});
                    this.on("successmultiple", function (files, response) {});
                    this.on("errormultiple", function (files, response) {});
                }
            }
        });


        function demo(){
            $("#img").click();  //隐藏了input:file样式后，点击头像就可以本地上传
            $("#img").on("change",function(){
                var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
                if (objUrl) {
                    $("#pic").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
                }
            });
        }

        function demo(){
            $("#img").click();  //隐藏了input:file样式后，点击头像就可以本地上传
            $("#img").on("change",function(){
                var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
                if (objUrl) {
                    $("#pic").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
                }
            });
        }

        //建立一個可存取到該file的url
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }



        function subTop() {
            var describe = $('#sub-top').val();
            var name = $('#imgname').val();
            var url = $('#urls').val();
            var lg = $('#tbody').children('tr');
//            console.log(name);
//            return null;
            $.ajax({
                url: '{{url("admin/theme/rexiao")}}',
                type: 'POST',
                dataType: 'json',
                cache: false,
                //pic和store_id应该是传过来的
                data: {_token: "{{ csrf_token() }}", name: name,url:url,describe:describe},
                success: function (data) {
                    console.log(data);
                    if(lg.length < 10) {
                        var tr = '<tr class="gradeX" id=""><td>' + (lg.length + 1) + '</td><td style="display: none">' + data.id + '</td><td>' + data.describe + '</td><td>' + data.url + '</td><td><a  data-toggle="modal" class="btn btn-primary" href="#modal-form-photo" onclick="subHid(this)">添加图片</a></td><td class="center"><a class="btn btn-primary" onclick="delType(this)">删除</a>&nbsp;<a data-toggle="modal" class="btn btn-primary" onclick="editType('+data.id+',this)" href="#modal-form-edit">修改</a></td></tr>';
                        $('#tbody').append(tr);
                    }
                    $('#sub-top').val("");
                    $('#name').val("");
                    $('#urls').val("");
                    $('#modal-form-one').modal('hide');

                },
                error: function (data) {
                    //                    console.log(data);
                },
            });
        }

        function subHid(obj) {
            //获取原节点id
            hid = $(obj).parentsUntil('#tbody').children('td').eq(1).html();
            //did =  $(obj).parent().parent().attr('id');
            src = $(obj).attr('src');
            //把原节点名添加到模态框
            $('#pic').attr('src',src);
            //把原节点名添加到模态框
            $('#hid').val(hid);
        }
        function editImg(obj) {
            //获取原节点id
            hid = $(obj).parentsUntil('#tbody').children('td').eq(1).html();
            //did =  $(obj).parent().parent().attr('id');
            $('#up_img').html('更改图片');

        }


        //点击修改弹出界面
        function editType(id,obj) {
            did =  $(obj).parent().parent().attr('id');
            //获取原节点名字  11（测试）
            $.ajax({
                url: '{{ url("admin/theme/rexiao/getrow") }}',
                type: 'POST',
                dataType: 'json',
                cache: false,
                data: {_token: "{{ csrf_token() }}",id:id },
                success:function(data) {
                    var name = data.name;
                    var url=data.url;
                    var describe=data.describe;
                    //把原节点名添加到模态框
                    $('#yname').val(describe);
                    $('#url').val(url);
                    $('#id').val(id);
                    $('#oldimg').val(name);
                },
                error:function(data)
                {
//                consolw.log(data);
                },
            });
        }
        function edit(obj) {
//            var did=obj.parent().parent();
            var describe = $('#yname').val();
            var id=$('#id').val();
            var name=$('#name').val();
            var url=$('#url').val();
            $.ajax({
                url: '{{ url("admin/theme/rexiao/update") }}',
                type: 'POST',
                dataType: 'json',
                cache: false,
                data: {_token: "{{ csrf_token() }}",name:name,id:id,url:url,describe:describe },
                success: function (data) {
                    if(data!=false){
                        $('#'+did).children('td').eq(2).html(describe);
                        $('#'+did).children('td').eq(3).html(url);
                        $('#'+did).children('td').eq(4).html(name);
                    }
                    $('#modal-form').modal('hide');
                },
                error: function (data) {
                },
            });
        }
        function delType(obj) {

            var id = $(obj).parentsUntil('#tbody').children('td').eq(1).html();
            $.ajax({
                url: '{{url("admin/theme/rexiao/getrow")}}',
                type: 'POST',
                dataType: 'json',
                cache: false,
                data: {_token: "{{ csrf_token() }}", id:id },
                success: function (data) {
                    if(confirm('你确定删除吗？')){
                        //alert("点击了确认按钮");
                        var id = $(obj).parentsUntil('#tbody').children('td').eq(1).html();
                        $.ajax({
                            url: '{{url("admin/theme/rexiao/del")}}',
                            type: 'POST',
                            dataType: 'json',
                            cache: false,
                            data: {_token: "{{ csrf_token() }}", id: id},
                            success: function (data) {
//                                console.log(data==false);
                                if(data!=false){
                                    $(obj).parent().parent().css('display','none');
                                }
                                // alert(data);
                                $('#modal-form-one').modal('hide');
                            },
                            error: function (data) {
//                                alert("删除时候确认以后ajax提交删除功能没有实现");
                                alert('出现错误，请刷新之后操作！');
                            },

                        });
                    }
                    else{
//                        alert("删除时点击了取消按钮");
                        alert('出现错误！请刷新重试！');
                    }
                },
                error: function (data) {
//                    alert('删除前查询失败!');
                },
            });
        }
    </script>
    <script>
        function fnClickAddRow() {
            $('#editable').dataTable().fnAddData([
                "Custom row",
                "New row",
                "New row",
                "New row",
                "New row"]);

        }



@stop